<script setup lang="ts">
import { addPatientApi, patientDetailApi, updatePatientApi } from '@/apis/patient'
import type { PatientParams } from '@/types/patient'
import { ref } from 'vue'

//0. 根据id获取患者详情
const props = defineProps<{ id: string }>()
const getPatientDetail = async () => {
  //0.1 判断是否有id
  if (!props.id) return

  //0.2 修改标题
  uni.setNavigationBarTitle({ title: '修改就诊人' })

  //0.3 调用接口完成数据回显
  const res = await patientDetailApi(props.id)
  formData.value = res
}
getPatientDetail()

// 1. 表单数据
const formData = ref<PatientParams>({
  name: '',
  idCard: '',
  gender: 1,
  defaultFlag: 0,
})
// 是否为默认就诊人
const onChangeSwitch = (e: any) => {
  formData.value.defaultFlag = e.detail.value ? 1 : 0
}
// 2. 表单校验规则
const formRef = ref()
const formRules = {
  name: {
    rules: [
      { required: true, errorMessage: '请填写患者姓名' },
      {
        pattern: '^[\u4e00-\u9fa5]{2,5}$',
        errorMessage: '患者姓名为2-5位中文',
      },
    ],
  },
  idCard: {
    rules: [
      { required: true, errorMessage: '请输入身份证号' },
      {
        pattern:
          '^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$',
        errorMessage: '身份证号格式不正确',
      },
    ],
  },
  gender: {
    rules: [
      { required: true, errorMessage: '请勾选性别' },
      {
        validateFunction(rule, value, data, callback) {
          if (data.idCard.slice(16, 17) % 2 !== value) {
            callback('性别与身份证号不匹配')
          }
          return true
        },
      },
    ],
  },
}

// 3. 提交表单
const onSubmit = async () => {
  try {
    await formRef.value.validate()
    if (props.id) {
      //编辑
      const { name, idCard, defaultFlag, gender } = formData.value
      const data = { name, idCard, defaultFlag, gender, id: props.id }
      await updatePatientApi(data)
    } else {
      await addPatientApi(formData.value)
    }

    uni.showToast({ title: `${props.id ? '编辑' : '添加'}患者成功`, icon: 'none' })
    uni.navigateBack()
  } catch (e) {
    uni.showToast({ title: `${props.id ? '编辑' : '添加'}患者失败`, icon: 'none' })
  }
}
</script>

<template>
  <scroll-page>
    <view class="archive-page">
      <uni-forms
        border
        label-width="220rpx"
        :model-value="formData"
        :rules="formRules"
        ref="formRef"
      >
        <uni-forms-item label="患者姓名" name="name">
          <uni-easyinput
            v-model="formData.name"
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写真实姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <uni-easyinput
            v-model="formData.idCard"
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写身份证号"
          />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox
            v-model="formData.gender"
            selectedColor="#16C2A3"
            :localdata="[
              { text: '男', value: 1 },
              { text: '女', value: 0 },
            ]"
          />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人">
          <view class="uni-switch">
            <switch
              :checked="formData.defaultFlag === 1 ? true : false"
              color="#20c6b2"
              style="transform: scale(0.7)"
              @change="onChangeSwitch"
            />
          </view>
        </uni-forms-item>
        <button class="uni-button" @click="onSubmit">保存</button>
      </uni-forms>
    </view>
  </scroll-page>
</template>

<style lang="scss">
@import './index.scss';
</style>